<template>
  <div class="wrapper">
    <div class="list-head">
      <div class="list-title">{{title}}</div>
      <router-link to="/all">
        <div class="list-more">全部电影&nbsp;&gt;&gt;&gt;</div>
      </router-link>
    </div>
    <div class="list-wrapper">
      <div
        class="item-wrapper"
        v-for="item of list"
        :key="item.movie_id"
      >
        <router-link :to="'/detail/' + item.movie_id">
          <div class="item">
            <div class="item-top">
              <img :src="item.cover_pic" class="item-img"/>
              <div class="item-score">{{item.douban_score}}</div>
            </div>
            <div class="item-middle">
              <div class="item-title">{{item.name}}</div>
            </div>
            <div class="item-bottom">
              <div class="item-desc">{{item.classification}}</div>
              <div class="item-comment">
                <div class="iconfont comment-icon">&#xe600;</div>
                <div class="item-comment-num">
                  {{item.comment_count}}
                </div>
              </div>
            </div>
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'ListSlider',
  props: {
    list: Array,
    title: String
  },
  data () {
    return {
      newList: this.list
    }
  },
  updated () {
  }
}
</script>
<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
  @import '~styles/mixins.styl'
  .wrapper
    // height: .4rem
    .list-head
      width: 100%
      height: .5rem
      overflow: hidden
      display: flex
      justify-content: space-between
      align-items: center
      .list-title
        height: .5rem
        color: rgba(0, 0, 0, .9)
        font-size: .21rem
        line-height: .5rem
        font-weight: 500
        margin-left: .15rem
      .list-more
        height: .5rem
        color: rgba(0, 0, 0, .9)
        font-size: .13rem
        line-height: .5rem
        font-weight: 500
        margin-right: .15rem
    .list-wrapper
      &::-webkit-scrollbar
        background-color: transparent;
      overflow-x: scroll
      overflow-y: hidden
      height: 2.50rem
      display: flex
      .item-wrapper
        box-sizing: border-box
        width: 1.4rem
        padding: .10rem
        flex-shrink: 0
        .item
          border-radius: .05rem
          width: 100%
          .item-top
            overflow: hidden
            height: 0
            width: 100%
            padding-bottom: 139.6%
            position: relative
            border-radius: .2rem
            .item-img
              width: 100%
              height: 100%
              position: absolute
            .item-score
              width: .2rem
              line-height: .20rem
              font-size: .16rem
              font-weight: bolder
              color: orange
              position: absolute
              bottom: .05rem
              right: .07rem
          .item-middle
            padding-top: .07rem
            padding-left: .04rem
            display:flex
            justify-content center
            height: .20rem
            .item-title
              flex: 1
              color: #000
              font-size: .15rem
              line-height: .20rem
              ellipsis()
          .item-bottom
            padding-top: .02rem
            padding-left: .04rem
            display:flex
            justify-content center
            height: .20rem
            .item-desc
              flex: 1
              color: #ccc
              font-size: .14rem
              line-height: .20rem
              ellipsis()
            .item-comment
              width: .3rem
              height: .20rem
              position: relative
              color: #666
              box-sizing: border-box
              padding: .02rem
              .item-comment-icon
                font-size: .12rem
              .item-comment-num
                font-size: .10rem
                position:absolute
                top: 0
                left: .17rem
</style>
